﻿@page "/tree-grid/row-drag-and-drop"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@using ej2_blazor_wrapdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the Tree Grid component with the row drag and drop feature. Drag and drop rows between TreeGrids to move rows.</p>
</SampleDescription>
<ActionDescription>
    <p>Tree Grid rows can be dragged and dropped to another Tree Grid by enabling the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridModel%601~AllowRowDragAndDrop.html'>AllowRowDragAndDrop</a></code> property. The target on which the Tree Grid rows has to be dropped can be set by using <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridRowDropSettings~TargetID.html'>TargetID</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridRowDropSettings.html'>TreeGridRowDropSettings</a></code> component.</p>
    <p>The Selection feature should be enabled to select the rows. Multiple rows can be selected by simply clicking and dragging them inside the Tree Grid.</p>
    <p>In this demo, the Row drag and drop feature is enabled in both the TreeGrids. To drag and drop rows between TreeGrids, select rows and drag and drop them to the adjacent TreeGrid.</p>
</ActionDescription>

<div class="col-lg-6 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid ID="Grid" DataSource="@DragData" IdMapping="TaskId" ParentIdMapping="ParentId" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true" TreeColumnIndex="1">
                <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridRowDropSettings TargetID="DestGrid"></TreeGridRowDropSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field=@nameof(WrapData.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field=@nameof(WrapData.TaskName) HeaderText="Task Name" Width="160"></TreeGridColumn>
                    <TreeGridColumn Field=@nameof(WrapData.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

<div class="col-lg-1 control-section">
    <div class="content-wrapper">
        <div class="row">
        </div>
    </div>
</div>
<div class="col-lg-5 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid ID="DestGrid" DataSource="@SecondGrid" IdMapping="TaskId" ParentIdMapping="ParentId" AllowRowDragAndDrop="true" AllowSelection="true" AllowPaging="true" TreeColumnIndex="1">
                <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridRowDropSettings TargetID="Grid"></TreeGridRowDropSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field=@nameof(WrapData.TaskId) HeaderText="Task ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="100"></TreeGridColumn>
                    <TreeGridColumn Field=@nameof(WrapData.TaskName) HeaderText="Task Name" Width="160"></TreeGridColumn>
                    <TreeGridColumn Field=@nameof(WrapData.Progress) HeaderText="Progress" Width="100"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>


@code{

    public List<WrapData> DragData { get; set; }

    public List<WrapData> SecondGrid { get; set; } = new List<WrapData>();


    protected override void OnInitialized()
    {
        DragData = WrapData.GetWrapData();
    }
}
